<template>
  <div class="cloud-sidebar">
    <el-menu class="mian-bar el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router>
      <div class="narrow-wrapper" @click="changeUnfoldStatus(1)" v-if="!isCollapse">
        <i class="iconfont icon-zhankaianniuicon narrow-icon"></i>
      </div>
      <div class="unfold-wrapper" @click="changeUnfoldStatus(0)" v-else>
        <i class="iconfont icon-icon01 unfold-icon"></i>
      </div>
      <template  v-for="(item,index) in menu">
        
        <el-menu-item :index="item.path" @click="men(index,item)" :key="item">
          <i :class="item.iconCls"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
        
      </template>
    </el-menu>

    <div class="sub-bar" v-if="itemlist.subbar">
      <div class="sub-fold-wrapper" v-if="!isHideSubMenu" @click="hideSubMenu">
        <i class="iconfont icon-meunfold sub-fold-icon"></i>
      </div>
      <div class="sub-unfold-wrapper" v-else @click="hideSubMenu">
        <i class="iconfont icon-menuunfold sub-unfold-icon"></i>
      </div>
      <div class="sub-header-title">{{itemlist.name}}</div>

     <div class="sub-menu-list">
        <router-link :to="item.path" v-for="(item,index) in itemlist.menu2" class="sub-menu-item" :key="index" active-class="sub-menu-item-active">{{item.name}}</router-link>
      </div>
    </div>
   </div>
   
</template>

<script>
export default {
  data() {
    return {
      toindex:'',
      itemlist: {},
      isCollapse: true,
      isHideSubMenu: false,
      isShowMainMenu: false,
        menu:[
        {
          path: '/photo',
          name: 'photo',
          subbar: false,
          iconCls: 'fa fa-cubes', 
        },
        // {
        //   path: '/latestData',
        //   name: '拱顶沉降',
        //   subbar: true,
        //   iconCls: 'fa fa-bar-chart',
        //   menu2:[
        //     {
        //         path: '/latestData',
        //         name: '最新数据'
        //     },
        //     {
        //         path: '/oldData',
        //         name: '历史数据'
        //     },
        //     {
        //         path: '/survey',
        //         name: '测斜分析'
        //     },
        //     {
        //         path: '/amplitude',
        //         name: '幅值分布'
        //     },
        //     {
        //         path: '/time',
        //         name: '时间分布 '
        //     },
        //     {
        //         path: '/matching',
        //         name: '拟合曲线 '
        //     },
        //     {
        //         path: '/timeCorrelation',
        //         name: '时间对比 '
        //     },
        //     {
        //         path: '/dataComparison',
        //         name: '数据对比 '
        //     }]
        // },
        // {
        //   path: '/oldData',
        //   name: '净空收敛',
        //   subbar: true,
        //   iconCls: 'fa fa-area-chart'
        // },
        // {
        //   path: '/survey',
        //   name: '地表沉降',
        //   subbar: true,
        //   iconCls: 'fa fa-line-chart'
        // },
        // {
        //   path: '/amplitude',
        //   name: '拱顶沉降',
        //   subbar: true,
        //   iconCls: 'fa fa-google-wallet'
        // },
        // {
        //   path: '/matching',
        //   name: '支撑轴力',
        //   subbar: true,
        //   iconCls: 'fa fa-upload'
        // },
        // {
        //   path: '/timeCorrelation',
        //   name: '地下水位',
        //   subbar: true,
        //   iconCls: 'fa fa-window-minimize'
        // },
        {
          path: '/project',
          name: '监测方案 ',
          subbar: false,
          iconCls: 'fa fa-object-group',
        },
        {
          path: '',
          name: '报表',
          subbar: true,
          iconCls: 'fa fa-file-text-o',
        },
        {
          path: '',
          name: '成员管理',
          subbar: true,
          iconCls: 'fa fa-cube',
          menu2:[
             //{ path: '/projectMess', name: '项目信息 '},
            { path: '/userAdd', name: '添加用户 '},
            { path: '/projectUser', name: '项目成员 '}
          ]
        }
      ],
    };
  },
  methods: {
    men(index,item){
      console.log(index,item)
    this.toindex = index,
    this.itemlist = item
    },
    changeUnfoldStatus(code) {
      if (code == 1) {
        this.isCollapse = true;
        sessionStorage.setItem("isUnfold", "1");
      } else {
        this.isCollapse = false;
        sessionStorage.setItem("isUnfold", "0");
      }
    },
    hideSubMenu() {
      let subbarObj = document.getElementsByClassName("sub-bar")[0];
      if (this.isHideSubMenu) {
        this.isHideSubMenu = false;
        subbarObj.style.width = "180px";
      } else {
        this.isHideSubMenu = true;
        subbarObj.style.width = "0px";
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {}
};
</script>

<style lang='scss'>
.cloud-sidebar {
  height: 100%;
  .mian-bar {
    float: left;
    height: 100%;
    background: #333744;
    .narrow-wrapper {
      width: 200px;
      height: 30px;
      background: #4a5064;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .narrow-icon {
        font-size: 12px;
        color: #aeafa7;
      }
    }
    .narrow-wrapper:hover .narrow-icon {
      color: #fff;
    }
    .unfold-wrapper {
      width: 64px;
      height: 30px;
      background: #4a5064;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .unfold-icon {
        font-size: 20px;
        color: #aeafa7;
      }
    }
    .unfold-wrapper:hover .unfold-icon {
      color: #fff;
    }
    .first-menu-wrapper {
      color: #fff;
      font-size: 12px;
      .item-menu-wrapper {
        .item-menu-title {
          display: flex;
          height: 40px;
          align-items: center;
          background: #42485b;
          cursor: pointer;
          img {
            margin-left: 18px;
            margin-right: 8px;
          }
        }
        .item-menu-title:hover {
          background: #00c1de;
        }
        .item-menu-list {
          .submenu {
            color: #aeb9c2;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            i {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin: 0 17px;
            }
          }
          .submenu:hover {
            background: #4a5064;
          }
          .submenu-active {
            background: #00c1de;
            color: #fff;
          }
          .submenu-active:hover {
            background: #00c1de;
            color: #fff;
          }
        }
      }
    }
  }
  .sub-bar {
    float: left;
    width: 180px;
    height: 100%;
    transition: width 0.2s;
    background: #eaedf1;
    position: relative;
    .sub-fold-wrapper {
      width: 20px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #f7f7f7;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      margin: auto 0;
      border-radius: 15px 0px 0px 15px;
      .sub-fold-icon {
        font-size: 16px;
        color: #546478;
      }
    }
    .sub-unfold-wrapper {
      width: 20px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #d9dee4;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 2;
      margin: auto 0;
      border-radius: 0px 15px 15px 0px;
      .sub-unfold-icon {
        font-size: 16px;
        color: #546478;
      }
    }
    .sub-header-title {
      height: 70px;
      line-height: 70px;
      background: #d9dee4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
      font-size: 12px;
      text-indent: 20px;
      box-sizing: border-box;
    }
    .sub-menu-list {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding-top: 70px;
      box-sizing: border-box;
      overflow-y: auto;
      .sub-menu-item {
        display: block;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-indent: 20px;
        color: #333;
        font-size: 12px;
      }
      .sub-menu-item:hover {
        background: #f4f6f8;
      }
       .sub-menu-item-active {
        background: #fff;
      }
      .sub-menu-item-active:hover {
        background: #fff;
      }
    }
  }
}
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
